import React, { PureComponent, memo } from "react";
import playIcon from "../../../assets/play.webp";
import "../style.scss";
const Banner = React.forwardRef(
    ({ data, showPlayIcon, index, onPlay }, ref) => {
        return (
            <div className="swiper-container banner" ref={ref}>
                <div className="swiper-wrapper">
                    {data &&
                        data.map((item, index) => (
                            <div className="swiper-slide" key={index}>
                                <img src={item} alt="" />
                            </div>
                        ))}
                </div>
                <div className="info">
                    <span>{index}</span>
                    <b>/</b>
                    <span>{data && data.size}</span>
                </div>
                <div className="play-icon" onClick={onPlay}>
                    {showPlayIcon && <img src={playIcon} alt="" />}
                </div>
            </div>
        );
    }
);
export default memo(Banner);
